<!--官网注册-->
<template>
    <div id="app">
        <page-header-simple/>
        
        <div class="register">
            <div class="title">账号注册</div>
            <div class="type">
                <div class="type-item">手机号注册</div>
                <div class="type-item">邮箱注册</div>
            </div>
            
            <div class="input-text">
                <input type="text" v-model="username" placeholder="手机号码/邮箱号">
            </div>
            <div class="input-text">
                <input type="text" v-model="username" placeholder="手机号码/邮箱号">
            </div>
            <div class="input-text">
                <input type="text" v-model="username" placeholder="手机号码/邮箱号">
            </div>
            <div class="input-text">
                <input type="text" v-model="username" placeholder="手机号码/邮箱号">
            </div>
            
            <div class="btn">
                注册
            </div>
        </div>
    </div>
</template>

<script>
    import PageHeaderSimple from '@views/PageHeaderSimple'
    
    export default {
        name: 'app',
        components: {
            PageHeaderSimple
        },
        data() {
            return {}
        },
        methods: {}
    }
</script>


<style lang="less" scoped>
    #app {
        position: relative;
        width: 100%;
        height: 100vh;
        background-color: #f5f5f5;
        
        .register {
            width: 460px;
            height: 578px;
            margin: 0 auto;
            background-color: #fff;
            border-radius: 8px;
            overflow: hidden;
            
            .title {
                height: 56px;
                background-color: #FFDC20;
                font-size: 18px;
                font-weight: 600;
                color: rgba(0, 0, 0, 1);
                line-height: 56px;
                text-align: center;
            }
            
            .type {
                display: flex;
                height: 54px;
                
            }
            
            .input-text {
                height: 93px;
            }
            
            .btn {
                width: 320px;
                height: 50px;
                background: rgba(255, 220, 32, 1);
                border-radius: 4px;
                background-color: #FFDC20;
                text-align: center;
                line-height: 50px;
                font-size: 18px;
                font-weight: 400;
                color: rgba(0, 0, 0, 1);
            }
        }
        
        .input-text {
            .flexed(flex-start);
            border-bottom: 2px solid rgba(0, 0, 0, .04);
            
            input::-webkit-input-placeholder {
                font-size: 14px;
                font-weight: 400;
                color: rgba(0, 0, 0, .4);
            }
            
            input::-moz-placeholder {
                font-size: 14px;
                font-weight: 400;
                color: rgba(0, 0, 0, .4);
            }
            
            input:-ms-input-placeholder {
                font-size: 14px;
                font-weight: 400;
                color: rgba(0, 0, 0, .4);
            }
            
            input:-webkit-autofill {
                -webkit-box-shadow: 0 0 0 1000px white inset;
                -webkit-text-fill-color: #333;
            }
            
            img {
                width: 14px;
                height: auto;
                margin: 0 13px;
            }
            
            input {
                width: 270px;
                height: 100%;
                border: none;
                outline: none;
            }
        }
        
        .tips {
            height: 17px;
            line-height: 17px;
            margin-top: 8px;
            font-size: 12px;
            font-weight: 400;
            color: rgba(224, 32, 32, 1);
        }
    }
</style>
